<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-17 22:48:58
 * @LastEditTime: 2022-05-20 09:56:23
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description:文章详情
-->
<template>
  <div class="article-detail-container">
    <h2 class="title">{{ detail.title }}</h2>
    <div class="header">
      <span class="author">{{ $t('article.author') }}：{{ detail.author }}</span>
      <span class="time">{{ $t('article.publicDate') }}：{{
          $filters.relativeTime(detail.publicDate)
        }}</span>
      <el-button
        type="text"
        class="edit"
        @click="onEditClick(detail._id)"
      >{{
        $t('article.edit')
      }}</el-button>
    </div>
    <div
      class="content"
      v-html="detail.content"
    ></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getArticleDetail } from '@/api/article'

const route = useRoute()
const router = useRouter()
const detail = ref({})

const init = async () => {
  detail.value = await getArticleDetail(route.params.id)
}
init()

// 编辑文章
const onEditClick = (id) => {
  router.push(`/article/editor/${id}`)
}
</script>

<style lang="scss" scoped>
.article-detail-container {
  .title {
    font-size: 22px;
    text-align: center;
    padding: 12px 0;
  }
  .header {
    padding: 26px 0;
    .author {
      font-size: 14px;
      color: #555666;
      margin-right: 20px;
    }
    .time {
      font-size: 14px;
      color: #999aaa;
      margin-right: 20px;
    }
    .edit {
      float: right;
    }
  }
  .content {
    font-size: 14px;
    padding: 20px 0;
    border-top: 1px solid #d4d4d4;
  }
}
</style>
